<!--仪表盘组件-->
<template>
  <div id="dashboard-box" style="height: 500px; width: 500px">
    <div id="dashboard"></div>
  </div>
</template>

<script>
    export default {
      name: "Dashboard",
      data(){
        return{
          //初始化用选项
          options:{},
          //插入option的数据示例
          testData:{},
        }
      },
      mounted() {
        this.initDashboard();
      },
      methods:{
        initDashboard(){
          this.options = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
              name: '液压',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}℃'
              },
              data: [{
                value: 50,
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }]
            }]
          };
          let mychart = this.$echarts.init(document.getElementById('dashboard'));
          mychart.setOption(this.options)
        }
      }
    }
</script>

<style scoped>
  #dashboard{
    height: 100%;
    width: 100%;
  }
</style>
